<template>
    <el-container>
        <el-main>
            <avue-crud ref="multipleTable" :data="tableData" :option="tableColumns" :page="page" @refresh-change="refresh"
                @search-change="searchChange" @search-reset="searchReset" @filter-change="filterChange" @size-change="sizeChange"
                @current-change="currentChange">
                <template slot="menu" slot-scope="{row}">
                    <el-button size="small" type="text" class="primarybtn-color"
                        @click.native="historyViewed(row)">
                        查看
                    </el-button>
                </template>
            </avue-crud>
            <el-dialog :destroy-on-close="false" :close-on-click-modal="false" :visible.sync="jobVisible" :before-close="handleCloseBindJob"
                fullscreen>
                <avue-form v-if="jobHackReset" ref="form" v-model="jobObj" :option="jobOption">
                </avue-form>
                <el-row slot="title">
                    {{jobTitle}}
                    <el-divider direction="vertical"></el-divider>
                    <span v-if="jobFormConfigs.length === 1">{{jobCurrentConfig.formName}}</span>
                    <el-select style="margin-top: -10px;width: 200px;" v-if="jobFormConfigs.length > 1" v-model="jobCurrentConfig.formId"
                        @change="jobFormChange">
                        <el-option v-for="item in jobFormConfigs" :key="item.formId" :label="item.formName" :value="item.formId">
                        </el-option>
                    </el-select>
                </el-row>
                <el-row slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button size="small" @click="jobVisible = false;">关闭</el-button>
                </el-row>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import {
        api
    } from "@/api/common";
    export default {
        data() {
            return {
                flowId: '',
                jobObj: {},
                jobRow: {},
                jobOption: {
                    emptyBtn: false,
                    submitBtn: false
                },
                jobHackReset: true,
                jobCurrentConfig: {},
                jobFormConfigs: [],
                jobVisible: false,
                jobTitle: '',
                nodeSelection: [],
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                searchForm: {},
                filterForm: {},
                tableData: [],
                tableColumns: {
                    border: true,
                    stripe: false,
                    showHeader: true,
                    index: false,
                    page: true,
                    align: 'left',
                    menuAlign: 'center',
                    addBtn: false,
                    delBtn: false,
                    editBtn: false,
                    menu: true,
                    columnBtn: false,
                    searchMenuSpan: 4,
                    column: [{
                        prop: "NUMBER",
                        label: "订单号"
                    }, {
                        prop: "NAME",
                        label: "客户姓名",
                    }, {
                        prop: "ORDERBELONG",
                        label: "订单所属人"
                    }, {
                        prop: "NODEID",
                        label: "所属节点",
                        type:'select',
                        // dicUrl: '/wf/api/wf/getWorkNodeByFlowIdForDict',
                        // dicMethod: 'post',
                        // dicQuery: {flowId: this.flowId},
                        dicData: this.nodeSelection,
                        filter: true,
                        search: true,
                    }, {
                        prop: "EXAMNAME",
                        label: "审核人",
                    }, {
                        prop: "EXAMDATE",
                        label: "审核时间"
                    }, {
                        prop: "EXAMRESULTNAME",
                        label: "审核结果"
                    }, {
                        prop: "EXAMREASON",
                        label: "审核意见"
                    }, {
                        label: '快捷搜索',
                        prop: 'keyword',
                        search: true,
                        hide: true,
                        searchPlaceholder: '订单号,客户姓名'
                    }],
                }
            }
        },
        watch: {
            "$route": function(to, from) {
                if (to.path != from.path) {
                    let path = this.$route.path
                    this.flowId = path.split("/")[3]
                    this.getWorkNodeByFlowIdForDict()
                    this.getTableList()
                }
            },
            // flowId(val) {
            //     this.$set(this.tableColumns.column[3].dicQuery, 'flowId', val)
            // },
            nodeSelection(val) {
                // console.log(val)
                this.$set(this.tableColumns.column[3], 'dicData', val)
            },
        },
        created() {
            let path = this.$route.path
            this.flowId = path.split("/")[3]
            this.getTableList();
        },
        methods: {
            // 表格刷新
            refresh() {
                this.getTableList();
            },
            // 搜索
            searchChange(params, done) {
                this.page.currentPage = 1
                this.getTableList(params)
                Object.assign(this.searchForm, params)
                done()
            },
            // 搜索清空
            searchReset() {
                this.page.currentPage = 1
                this.$set(this.searchForm, 'keyword', '')
                this.$set(this.searchForm, 'NODEID', '')
                this.getTableList()
            },
            // 表格过滤（高级搜索）
            filterChange(result) {
                this.getTableList(result)
                this.filterForm = result
            },
            // 分页
            sizeChange(val) {
                this.page.currentPage = 1
                this.page.pageSize = val
                this.getTableList();
            },
            // 当前页
            currentChange(val) {
                this.page.currentPage = val
                this.getTableList();
            },
            // 获取表格数据
            async getTableList(where) {
                this.getWorkNodeByFlowIdForDict()
                let params = {
                    flowId: this.flowId,
                    page: this.page.currentPage,
                    limit: this.page.pageSize
                }
                params = Object.assign({}, params, this.searchForm)
                params = Object.assign({}, params, this.filterForm)
                if (where) {
                    params = Object.assign({}, params, where)
                }
                let _this = this
                _this.axios.post(api.getHistoryJobList, params).then((res) => {
                    if (res.data.code == 10000) {
                        _this.tableData = res.data.data.list
                        _this.page.total = res.data.data.count
                    } else {
                        _this.tableData = []
                        _this.page.total = 0
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                }).catch((err) => {
                    _this.tableData = []
                    _this.page.total = 0
                    console.log('调用失败', err)
                })
            },
            getWorkNodeByFlowIdForDict() {
                let _this = this,
                    params = {
                        flowId: this.flowId,
                    }
                _this.axios.post(api.getWorkNodeByFlowIdForDict, params).then((res) => {
                    if (res.data.code == 10000) {
                        _this.nodeSelection = res.data.data
                    } else {
                        _this.nodeSelection = []
                    }
                }).catch((err) => {
                    _this.nodeSelection = []
                    console.log('调用失败', err)
                })
            },
            historyViewed(row) {
                this.$set(this, 'jobObj', {})
                let msgTitle = '';
                if (typeof row.NUMBER === undefined || typeof row.NUMBER === 'undefined') {
                    msgTitle = '查看';
                } else {
                    msgTitle = '查看#' + row.NUMBER;
                }
                
                let _this = this
                _this.axios.post(api.getHistoryJobDataDetail, {
                    id: row.id,
                }).then((res) => {
                    if (res.data.code == 10000) {
                        console.log(res.data.data)
                        _this.jobRow = row
                        _this.jobObj = res.data.data
                        _this.getJobFormDefaultConfig(row.FLOWID, row.NODEID, msgTitle)
                    } else {
                        _this.jobRow = {}
                        _this.jobObj = {}
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        })
                    }
                }).catch(() => {
                    _this.jobRow = {}
                    _this.jobObj = {}
                    _this.$message({
                        showClose: false,
                        message: '暂无详情表单！',
                        type: 'error'
                    })
                })
            },
            handleCloseBindJob() {
                this.jobVisible = false
                this.jobTitle = ''
                this.jobRow = {}
                this.jobObj = {}
                this.jobOption = {
                    emptyBtn: false,
                    submitBtn: false
                }
                this.jobCurrentConfig = {}
                this.jobFormConfigs = []
                this.jobHackReset = false
                this.$nextTick(() => {
                    this.jobHackReset = true
                })
                this.getTableList()
            },
            jobFormChange(formId) {
                let _this = this
                _this.axios.post(api.getJobFormConfigByFormId, {
                    formId: formId,
                }).then((res) => {
                    if (res.data.code == 10000) {
                        _this.jobOption = Object.assign({}, res.data.data)
                        
                        _this.jobOption['detail'] = true
                        _this.jobHackReset = false
                        _this.$nextTick(() => {
                            _this.jobHackReset = true
                        })
                    } else {
                        _this.jobOption = {
                            emptyBtn: false,
                            submitBtn: false
                        }
                    }
                }).catch(() => {
                    _this.jobOption = {
                        emptyBtn: false,
                        submitBtn: false
                    }
                })
            },
            getJobFormDefaultConfig(flowId, nodeId, msgTitle) {
                let _this = this
                _this.axios.post(api.getJobFormDefaultConfig, {
                    flowId: flowId,
                    nodeId: nodeId,
                }).then((res) => {
                    if (res.data.code == 10000) {
                        console.log(res.data.data)
                        if (res.data.data.length === 0) {
                            _this.jobOption = {
                                emptyBtn: false,
                                submitBtn: false
                            }
                            _this.jobCurrentConfig = {}
                            _this.jobFormConfigs = []
                            _this.jobVisible = false
                            _this.jobTitle = ''
                            _this.$message({
                                showClose: false,
                                message: '暂无详情表单！',
                                type: 'info'
                            })
                            return false
                        }
                        _this.jobVisible = true
                        _this.jobTitle = msgTitle
                        
                        _this.jobOption = Object.assign({}, res.data.data.default)
                        _this.jobCurrentConfig = Object.assign({}, res.data.data.currentConfig)
                        _this.jobFormConfigs = res.data.data.formConfigs
                        _this.jobOption['detail'] = true
                        
                        _this.jobHackReset = false
                        _this.$nextTick(() => {
                            _this.jobHackReset = true
                        })
                    } else {
                        _this.jobOption = {
                            emptyBtn: false,
                            submitBtn: false
                        }
                    }
                }).catch(() => {
                    _this.jobOption = {
                        emptyBtn: false,
                        submitBtn: false
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    .avue-crud__right {
        position: relative;
    }

    .fast-search {
        position: absolute;
        right: 218px;
    }
</style>
